<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function selectAll() {
            $(":checkbox[name='ids']").prop("checked", $(".all").prop("checked"));
        }
        function selectOne() {
            $(".all").prop("checked", $(":checkbox[name='ids']").length==$(":checkbox[name='ids']:checked").length);
        }
        $(function () {
            $(".table tbody tr").click(function () {
                var checkbox = $(this).find(":checkbox[name='ids']");
                if(checkbox.prop("checked")){
                    checkbox.prop("checked", false);
                }else{
                    checkbox.prop("checked", true);
                }
                selectOne();
            });
        });
        //批量删除
        function deleteBatch() {
            var checkboxes = $(":checkbox[name='ids']:checked");
            if(checkboxes.length==0){
                alert("请选中一条要删除的数据!");
            }else{
                if(confirm("确定删除吗?")){
                    $("#delete_form").submit();
                }
            }
        }
        //打开修改页面
        function showUpdate() {
            var checkboxes = $(":checkbox[name='ids']:checked");
            if(checkboxes.length==0){
                alert("请选中一条要修改的数据!");
            }else if(checkboxes.length>1){
                alert("只能修改一条数据");
            }else{
                location.href = "dept/show/update/"+checkboxes.val();
            }
        }
    </script>
</head>
<body>
    <!--=======================路径导航=========================-->
    <ol class="breadcrumb">
        <li>主页</li>
        <li>员工管理</li>
        <li class="active">部门列表</li>
    </ol>
    <!--=======================路径导航.end=========================-->
    <!--=======================页面主体=========================-->
    <div class="panel-body">
        <!--=======================操作按钮=========================-->
        <div style="margin-bottom: 10px">
            <a class="btn btn-default" href="/dept/show/add">新增</a>
            <button class="btn btn-success" onclick="showUpdate()">修改</button>
            <button class="btn btn-danger" onclick="deleteBatch()">删除</button>
        </div>
        <!--=======================操作按钮.end=========================-->
        <!--=======================表格=========================-->
        <form id="delete_form" action="dept/removeBatch" method="post">
            <table class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <th width="5%"><input type="checkbox" class="all" onclick="selectAll()"></th>
                        <th width="35%">部门名称</th>
                        <th width="30%">部门位置</th>
                        <th width="30%">操作</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${info.list}" var="dept">
                    <tr>
                        <td><input type="checkbox" name="ids" value="${dept.deptno}" onclick="selectOne()"></td>
                        <td>${dept.dname}</td>
                        <td>${dept.loc}</td>
                        <td>
                            <a class="btn btn-success btn-sm" href="dept/show/update/${dept.deptno}">修改</a>&emsp;
                            <a class="btn btn-danger btn-sm" href="dept/remove/${dept.deptno}" onclick="return confirm('确定删除吗?')">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </form>
        <!--=======================表格.end=========================-->
        <!--=======================分页组件=========================-->
        <nav aria-label="Page navigation" style="text-align: right;">
            <ul class="pagination">
                <li>
                    <a href="dept/list" aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li>
                    <a href="dept/list?page=${info.prePage}" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
                <c:forEach items="${info.navigatepageNums}" var="page">
                    <c:if test="${page==info.pageNum}">
                        <li class="active"><a href="dept/list?page=${page}">${page}</a></li>
                    </c:if>
                    <c:if test="${page!=info.pageNum}">
                        <li><a href="dept/list?page=${page}">${page}</a></li>
                    </c:if>
                </c:forEach>
                <li>
                    <a href="dept/list?page=${info.nextPage}" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
                <li>
                    <a href="dept/list?page=${info.pages}" aria-label="Next">
                        <span aria-hidden="true">末页</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!--=======================分页组件.end=========================-->
    </div>
    <!--=======================页面主体.end=========================-->
</body>
</html>
